import * as React from 'react'
import { useAppSelector,useAppDispatch } from '../../hooks';
import { useEffect } from 'react';
import { getGoodUpdate,getGoodInfo } from '../../store/actions'
import {
    Form, Input, Button, InputNumber, Switch, Upload
} from 'antd';
import SelectCateGood from './components/SelectCateGood';
import './style.scss'
import ImgUpload from './components/ImgUpload';
import { useParams} from 'react-router-dom'
const { TextArea }= Input

const formItemLayout = {
    labelCol: {
        sm: { span: 4 },
    },
    wrapperCol: {
        sm: { span: 12 },
    },
}
const tailFormItemLayout = {
    wrapperCol: {
        sm: {
            span: 3,
            offset: 3,
        },
    },
};
export default props => {
    const [form] = Form.useForm();
    const cate: Array<any> = useAppSelector(store => store.good.cates)
    const dispatch=useAppDispatch()
    const count = useAppSelector(store => store.good.count)
    const info = useAppSelector(store => store.good.info)
    const id=useParams().id
    //提交
    const onFinish=values=>{
        console.log(values);
        if (id) values.id = id
        dispatch(getGoodUpdate(values))
        
    }
    useEffect(()=>{
        if(count!==0) props.history.goBack()
    },[count])

    useEffect(() => {
        if (id) {
            // 根据id调商品详情
            dispatch(getGoodInfo({ id }))
            // 走redux流程，当数据回来时，填充默认表单
        }
    }, [])

    useEffect(() => {
        console.log('-----', id)
        console.log('-----', info)
        
        if (id && info._id) {
            form.setFieldsValue(info)
        }
    }, [info])

    return (
        <div className='qf-good-info'>
            {id ? '商品编辑' : '商品新增'}
            <Form
                {...formItemLayout}
                form={form}
                onFinish={onFinish}
                scrollToFirstError
            >
                <Form.Item
                    name="name"
                    label="商品名称"
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="desc"
                    label="商品描述"
                    rules={[]}
                    hasFeedback
                >
                    <TextArea rows={4}/>
                </Form.Item>

                <Form.Item
                    name="price"
                    label="商品价格"
                >
                    <InputNumber min={0} />
                </Form.Item>

                <Form.Item
                    name="cate"
                    label="商品品类"
                >
                    <SelectCateGood cate={cate}/>
                </Form.Item>

                <Form.Item
                    name="hot"
                    label="是否热销"
                    valuePropName='checked'
                >
                    <Switch/>
                </Form.Item>

                <Form.Item
                    name="img"
                    label="商品图片"
                >
                    <ImgUpload/>
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}